<template>
  <div class="groupChat">
    <mt-cell @click.native="linkChat">
      <p class="pcs">46人在线</p>
      <span class="groupChat-span">租房住怎么在有限条件内提高生活质量?</span>

      <img class="user-img" slot="icon" src="../assets/img/5.jpg" />
    </mt-cell>

    <mt-cell @click.native="linkChat">
      <p class="pcs">16人在线</p>
      <span class="groupChat-span">大学生第一次租房需要注意什么？</span>

      <img class="user-img" slot="icon" src="../assets/img/3.jpg" />
    </mt-cell>
  </div>
</template>
<script>
export default {
  methods: {
    linkChat() {
      console.log("hehe");
      this.$router.push({ name: "WebSocketTest" });
    },
  },
};
</script>
<style >
.groupChat .mint-cell {
  margin: 1rem 0.5rem;
  border-bottom: 1px solid #888;
  border-radius: 13px;
  box-shadow: 1px 1px 5px -2px;
}
.groupChat .pcs {
  position: absolute;
  top: 45px;
  left: 81px;
}
.groupChat .groupChat-span {
  font-size: 17px;
  font-weight: 400;
  color: #1e1e1e;

  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  width: 278px;
  margin-bottom: 26px;
  margin-left: 11px;
}
.groupChat .mint-cell .user-img {
  width: 60px;
  height: 60px;
  margin: 7px 0px;
}
</style>